<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div class="flex">
          <h1 class="f16">月生产状况</h1>
          <el-button class="primaryBth ml20" type="primary" size="default" @click="dialogVisible = true">+</el-button>
          <el-button class="primaryBth ml20" type="primary" size="default" @click="removeCurrentRow">-</el-button>
        </div>
        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          class="mt10"
          @selectList="selectTableList"
          :getTableList="getTableList"
          @confirmChange="confirmChange"
          @currentRow="currentRow"
          :isLoading="isLoading"
          @checkboxChange="checkboxChange"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px' }">
        <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
      </el-card>
    </div>
    <el-dialog v-model="dialogVisible" title="添加" width="88%" class="dialog pb0">
      <Find :OriginalFilter="{ static: true }" :formList="formList2" @findClicked="findClicked2" :searchImg="false" />
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import LoginWork from '@/utils/LoginWork'
import { formateData } from '@/plugins/mixinJ'
import JMessage from '@/utils/JMessage'
export default defineComponent({ name: 'DepartmentalMonthlyItem' })
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
const currentDate = ref('') // 当前日期
const dialogVisible = ref(false)
const formList = ref([
  {
    type: 'button',
    checkboxLabel: '取上月设定资料'
  },
  {
    dateType: 'month',
    type: 'dateMonth',
    dateLabel: '日期',
    dateValue: currentDate
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
  // 系统上点了没反应
  // {
  //   type: 'button',
  //   checkboxLabel: '取资料',
  // },
  // 系统上点了没反应
  // {
  //   type: 'button',
  //   checkboxLabel: '导出日生产报表',
  // },
])
const formList2 = ref<any>([
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '月份',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '序号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '',
    selectLabel: '部门类别',
    selectOptions: [
      { optionLabel: '版房', optionValue: '版房' },
      { optionLabel: '备料', optionValue: '备料' },
      { optionLabel: '裁断', optionValue: '裁断' },
      { optionLabel: '裁剪工艺', optionValue: '裁剪工艺' },
      { optionLabel: '配套', optionValue: '配套' },
      { optionLabel: '针车', optionValue: '针车' },
      { optionLabel: '大底', optionValue: '大底' },
      { optionLabel: '成型', optionValue: '成型' }
    ]
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '部门代码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '部门名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '责任人',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '汇总部门',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '汇总层级',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '汇总部门',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '本月目标产量',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '本月工作天数',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '日目标产量',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '当日实际完成',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '本月累计完成',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '本月欠数',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '日需完成',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '',
    inputLabel: '月达成率',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '确定'
  }
])
const change = ref(true)
const tableHeader = ref([
  {
    change: true,
    label: '月份',
    prop: 'month'
  },
  {
    change: true,
    label: '序号',
    prop: 'seqNo'
  },
  {
    type: 'select',
    label: '部门类别',
    prop: 'deptType'
  },
  {
    label: '部门代码',
    prop: 'deptNo'
  },
  {
    label: '部门名称',
    prop: 'deptName'
  },
  {
    label: '责任人',
    prop: 'dutyReason'
  },
  {
    label: '汇总部门',
    // TODO: 未找到对应的字段
    prop: 'levelCode'
  },
  {
    label: '汇总层级',
    prop: 'levelCode'
  },
  {
    type: 'checkbox',
    label: '汇总部门',
    prop: 'parentDept'
  },
  {
    label: '本月目标产量',
    prop: 'monthTarget'
  },
  {
    label: '本月工作天数',
    prop: 'workDays'
  },
  {
    label: '日目标产量',
    prop: 'dayTarget'
  },
  {
    label: '当日实际完成',
    prop: 'realTarget'
  },
  {
    label: '本月累计完成',
    prop: 'dprodQty'
  },
  {
    label: '本月欠数',
    prop: 'mprodQty'
  },
  {
    label: '日需完成',
    prop: 'munProdQty'
  },
  {
    label: '月达成率',
    prop: 'dneedProdQty'
  }
])
// 表一模块
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '取上月设定资料') {
    getTableList(2)
    getTableList(1)
  }
}
const findClicked2 = async (content: string) => {
  if (content === '确定') {
    const res = await LoginWork.post<any, any>(`/prod/develop/updateProdStatus?choose=${1}`, {
      month: formList2.value[0].inputValue,
      seqNo: formList2.value[1].inputValue,
      deptType: formList2.value[2].selectValue,
      deptNo: formList2.value[3].inputValue,
      deptName: formList2.value[4].inputValue,
      dutyReason: formList2.value[5].inputValue,
      levelCode: formList2.value[6].inputValue,
      parentDept: formList2.value[7].inputValue,
      // parentDept: formList2.value[8].inputValue,
      monthTarget: formList2.value[9].inputValue,
      workDays: formList2.value[10].inputValue,
      dayTarget: formList2.value[11].inputValue,
      realTarget: formList2.value[12].inputValue,
      dprodQty: formList2.value[13].inputValue,
      mprodQty: formList2.value[14].inputValue,
      munProdQty: formList2.value[15].inputValue,
      dneedProdQty: formList2.value[16].inputValue
    })
    if (res.code === 200) {
      JMessage.success('添加成功')
      dialogVisible.value = false
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
}
const tableData = ref<any>([])
const isLoading = ref(true)

// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async (choose = 1) => {
  isLoading.value = true
  const date = formList.value.find(
    (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '日期'
  )?.dateValue
  let tableDataList = await LoginWork.post<any, any>(
    `/prod/develop/prodStatusList?date=${date}&choose=${choose}&pageNum=${currentPage.value}&pageSize=${pageSize.value}`
  )
  isLoading.value = false
  tableData.value = tableDataList.data.list.map((item: any) => {
    item.deptType = {
      selectValue: item.deptType || '',
      options: [
        {
          label: '版房',
          value: '版房' //中间空两个
        },
        {
          label: '备料',
          value: '备料' //中间空两个
        },
        {
          label: '裁断',
          value: '裁断' //中间空两个
        },
        {
          label: '裁剪工艺',
          value: '裁剪工艺' //中间空两个
        },
        {
          label: '配套',
          value: '配套' //中间空两个
        },
        {
          label: '针车',
          value: '针车' //中间空两个
        },
        {
          label: '大底',
          value: '大底' //中间空两个
        },
        {
          label: '成型',
          value: '成型' //中间空两个
        }
      ]
    }
    item.change = 'Y'
    console.log(item.month)

    if (item.month !== '') {
      change.value = true
    } else {
      change.value = false
    }
    return item
  })
  total.value = tableDataList.data.total

  if (tableDataList.code !== 200) {
    JMessage.error(tableDataList.message)
  }
  // currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)

const selectedLists = ref([])
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}
onMounted(() => {
  // const date = new Date();
  // const year = date.getFullYear();
  // const month = date.getMonth() + 1;
  // const day = date.getDate();
  // let newMonth = month > 10 ? month : "0" + month;
  // let newDay = day > 10 ? day : "0" + day;
  // currentDate.value = `${year}-${newMonth}-${newDay}`;
})

// 修改后点击确定按钮
const confirmChange = async (row: any) => {
  const copyData = formateData([row])
  const res = (await LoginWork.post(`/prod/develop/updateProdStatus?choose=${3}`, copyData[0])) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}
const currentTableRow = ref()
const removeCurrentRow = async () => {
  const copyData = formateData([currentTableRow.value])
  const res = await LoginWork.post<any, any>(`/prod/develop/updateProdStatus?choose=${2}`, copyData[0])
  if (res.code === 200) {
    JMessage.success('删除成功')
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}
// checkbox修改后函数
const checkboxChange = async (prop: any, row: any) => {
  const copyData = formateData([row])
  const res = (await LoginWork.post(`/prod/develop/updateProdStatus?choose=${3}`, copyData[0])) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}
// 点击表给另一张表传数据
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
}
</script>
<style>
.el-dialog__body {
  padding: 0px 20px 15px 20px;
}
</style>
<style lang="less" scoped>
:deep(.inputBase) {
  width: 80px;
  height: 25px;
}
</style>
